<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <el-breadcrumb-item class="no-redirect">
      <el-button
        v-if="showBack"
        icon="el-icon-back"
        type="text"
        class="routeBack"
        @click="$router.back()"
      >返回</el-button>
      <div v-if="showBack" class="line" />
      {{ levelList }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>

export default {
  data() {
    return {
      levelList: null,
      showBack: false
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },

  methods: {
    getBreadcrumb() {
      if (Object.keys(this.$route.query).length) {
        this.showBack = true
      } else {
        this.showBack = false
      }
      this.levelList = this.$route.meta.title
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
  color: #000;
  font-weight: 700 ;
  font-size: 16px;
}
.routeBack{
  font-weight: 500;
  color: rgb(42, 41, 41);
  font-size: 14px;
}
</style>
